<template>
	<view>
		<!-- 首页 -->
		<!-- img -->
		<img class="lfy_head_img" src="http://127.0.0.1:7001/public/lfyimg/lfy_home.png" alt="">
		<!-- tabs -->
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="首页" name="first">
				<!-- content -->
				<!-- 精彩推荐 -->
				<view class="lfy_home_container">
					<!-- title -->
					<p class="lfy_home_title">
						<img class="title_left" src="http://127.0.0.1:7001/public/lfyimg/lfy_title_left.png" alt="">
						<span>精彩推荐</span>
						<img class="title_right" src="http://127.0.0.1:7001/public/lfyimg/lfy_title_right.png" alt="">
					</p>
					<!--  -->
					<view class="lfy_home_con">
						<!--  -->
						<view class="course_box" @click="getCourseTopic" v-for="item in course" :key="item.id">
							<view class="course_img">
								<img :src="item.courseImg" alt="">
							</view>
							<view class="course_info">
								<p class="name">{{item.name}}</p>
								<p class="intro">{{item.intro}}</p>
								<p class="original_price">
									<del>¥ {{item.originalPrice}}元</del>
								</p>
								<p>
									<span class="join_number">参与人数:{{item.joinNumber}}人</span>
									<span class="free">{{item.free}}</span>
								</p>
							</view>
						</view>
					</view>
				</view>
				<!-- 功能课程 -->
				<view class="lfy_home_container">
					<!-- title -->
					<p class="lfy_home_title">
						<img class="title_left" src="http://127.0.0.1:7001/public/lfyimg/lfy_title_left.png" alt="">
						<span>功能课程</span>
						<img class="title_right" src="http://127.0.0.1:7001/public/lfyimg/lfy_title_right.png" alt="">
					</p>
					<!--  -->
					<view class="lfy_home_con">
						<!--  -->
						<view class="course_box"  @click="getCourseTopic" v-for="item in course" :key="item.id">
							<view class="course_img">
								<img :src="item.courseImg" alt="">
							</view>
							<view class="course_info">
								<p class="name">{{item.name}}</p>
								<p class="intro">{{item.intro}}</p>
								<p class="original_price">
									<del style="visibility: hidden;">empty</del>
								</p>
								<p>
									<span class="join_number">参与人数:{{item.joinNumber}}人</span>
									<span class="free">¥ {{item.originalPrice}}元</span>
								</p>
							</view>
						</view>
					</view>
				</view>
				<!-- 系列课程 -->
				<view class="lfy_home_container">
					<!-- title -->
					<p class="lfy_home_title">
						<img class="title_left" src="http://127.0.0.1:7001/public/lfyimg/lfy_title_left.png" alt="">
						<span>系列课程</span>
						<img class="title_right" src="http://127.0.0.1:7001/public/lfyimg/lfy_title_right.png" alt="">
					</p>
					<!--  -->
					<view class="lfy_home_con">
						<!--  -->
						<view class="course_box"  @click="getCourseTopic" v-for="item in course" :key="item.id">
							<view class="course_img">
								<img :src="item.courseImg" alt="">
							</view>
							<view class="course_info">
								<p class="name">{{item.name}}</p>
								<p class="intro">{{item.intro}}</p>
								<p class="original_price">
									<del style="visibility: hidden;">empty</del>
								</p>
								<p>
									<span class="join_number">参与人数:{{item.joinNumber}}人</span>
									<span class="free">¥ {{item.originalPrice}}元</span>
								</p>
							</view>
						</view>
					</view>
					<p class="see_more" @click="seeMore" v-if="flage">查看全部在线课程</p>
				</view>

			</el-tab-pane>
			<el-tab-pane label="孕期课程" name="second">
				<!-- content -->
				<view class="lfy_home_container">
					<!--  -->
					<view class="lfy_home_con">
						<!--  -->
						<view class="course_box"  @click="getCourseTopic" v-for="item in course" :key="item.id">
							<view class="course_img">
								<img :src="item.courseImg" alt="">
							</view>
							<view class="course_info">
								<p class="name">{{item.name}}</p>
								<p class="intro">{{item.intro}}</p>
								<p class="original_price">
									<del style="visibility: hidden;">empty</del>
								</p>
								<p>
									<span class="join_number">参与人数:{{item.joinNumber}}人</span>
									<span class="free">¥ {{item.originalPrice}}元</span>
								</p>
							</view>
						</view>
					</view>
					<p class="see_more" @click="seeMore" v-if="flage">查看全部在线课程</p>
				</view>
			</el-tab-pane>
			<el-tab-pane label="产后课程" name="third">
				<!-- content -->
				<view class="lfy_home_container">
					<!--  -->
					<view class="lfy_home_con">
						<!--  -->
						<view class="course_box"  @click="getCourseTopic" v-for="item in course" :key="item.id">
							<view class="course_img">
								<img :src="item.courseImg" alt="">
							</view>
							<view class="course_info">
								<p class="name">{{item.name}}</p>
								<p class="intro">{{item.intro}}</p>
								<p class="original_price">
									<del style="visibility: hidden;">empty</del>
								</p>
								<p>
									<span class="join_number">参与人数:{{item.joinNumber}}人</span>
									<span class="free">¥ {{item.originalPrice}}元</span>
								</p>
							</view>
						</view>
					</view>
					<p class="see_more" @click="seeMore" v-if="flage">查看全部在线课程</p>
				</view>
			</el-tab-pane>
			<el-tab-pane label="名师培训" name="fourth">
				<!-- content -->
				<view class="lfy_home_container">
					<!--  -->
					<view class="lfy_home_con">
						<!--  -->
						<view class="course_box"  @click="getCourseTopic" v-for="item in course" :key="item.id">
							<view class="course_img">
								<img :src="item.courseImg" alt="">
							</view>
							<view class="course_info">
								<p class="name">{{item.name}}</p>
								<p class="intro">{{item.intro}}</p>
								<p class="original_price">
									<del style="visibility: hidden;">empty</del>
								</p>
								<p>
									<span class="join_number">参与人数:{{item.joinNumber}}人</span>
									<span class="free">¥ {{item.originalPrice}}元</span>
								</p>
							</view>
						</view>
					</view>
					<p class="see_more" @click="seeMore" v-if="flage">查看全部在线课程</p>
				</view>
			</el-tab-pane>
		</el-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tabs
				activeName: 'first',
				course: [],
				dataAll: [],
				flage: true,
			}
		},
		onShow() {
			this.getlist()
		},
		methods: {
			getlist() {
				this.$api.lfycourse().then((res) => {
					console.log(res)
					this.course = res.data.slice(0, 3)
					this.dataAll = res.data
				})
			},
			// 查看全部在线课程
			seeMore() {
				this.flage = false
				this.course = this.dataAll
			},
			// tabs
			handleClick(tab, event) {
				console.log(tab, event);
				this.flage = true
				this.getlist()
			},
			// 路由-课程主题
			getCourseTopic(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/Home/lfyCourseTopic'
				})
			},
		},

	}
</script>
<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	// 首页
	// img
	.lfy_head_img {
		width: 100%;
	}

	// tabs
	::v-deep .el-tabs__item.is-active {
		color: #8fc31f;
	}

	::v-deep .el-tabs__active-bar {
		background-color: #8fc31f;
	}

	::v-deep .el-tabs__item {
		color: #646464;
		font-size: 32upx;
		font-weight: 400;
	}

	::v-deep .el-tabs__nav-scroll {
		display: flex;
		justify-content: space-around;
		background-color: #fafafa;
	}

	::v-deep .el-tabs__nav-wrap {
		box-shadow: 0upx 10upx 40upx #efeeee;
	}

	::v-deep .el-tabs__header {
		margin-bottom: 0;
	}

	// content
	.lfy_home_container {
		background-color: #f0f0f0;
		padding-bottom: 20upx;
	}

	// title
	.lfy_home_title {
		color: #8fc31f;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		text-align: center;
		background-color: #fafafa;

		span {
			margin: 0 10upx;
		}

		.title_left {
			width: 40upx;
		}

		.title_right {
			width: 40upx;
		}
	}

	// 
	.lfy_home_con {
		padding: 0 30upx;
		background-color: #fafafa;
	}

	// 
	.course_box {
		border-top: 2upx solid #cbcbcb;
		padding: 20upx 0;
		background-color: #fafafa;
		display: flex;

		.course_img {
			width: 40%;
			position: relative;

			img {
				width: 100%;
				height: 100%;
			}

			&::before {
				content: '50:01';
				position: absolute;
				bottom: 10upx;
				left: 10upx;
				font-size: 25upx;
				color: #fff;
				opacity: 0.6;
			}
		}


		.course_info {
			width: 60%;
			padding-left: 15upx;

			.name {
				color: #323232;
				font-size: 32upx;
			}

			.intro {
				color: #909090;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: 28upx;
			}

			.original_price {
				color: #909090;
				font-size: 24upx;
				text-align: right;
			}

			.join_number {
				color: #909090;
				font-size: 25upx;
			}

			.free {
				color: #8fc31f;
				font-size: 30upx;
				float: right;
			}
		}
	}

	.see_more {
		font-size: 28upx;
		color: #909090;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		background-color: #f0f0f0;
	}
</style>
